<template>
    <PayHeader title="支付页面" />
    <div class="goods">
        <div class="image">
            <img :src="goodsDetails?.image" alt="">
        </div>
        <div class="text">
            <h3>{{ goodsDetails?.title }}</h3>
            <div>
                <span class="price">￥{{ goodsDetails?.price }}</span>
                <span class="num">x1</span>
            </div>
        </div>
    </div>
    <ItemView :item="item1" />
    <ItemView :image="true" :item="item2" />
    <ItemView :item="item3" />
    <ItemView :item="item4" />
    <van-submit-bar :price="price" button-text="支付订单" @submit="onSubmit" />
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick,computed } from "vue"
import PayHeader from "../../components/PubHeaderComponent.vue"
import ItemView from "./components/ItemView.vue"
import { useRoute } from "vue-router"
import api from "../../api/index"
import alipay from "../../assets/images/alipay.png"

const route = useRoute()

interface IGoods {
    id: number,
    image: string,
    price: string,
    title: string
}

const goodsDetails = ref<IGoods>()

const item1 = reactive<{
    title: string,
    text: string|undefined
}>({
    title:"支付金额",
    text:""
})

const item2 = {
    title: "支付方式",
    image: alipay
}

const item3 = {
    title: "使用优惠券",
    text: ""
}

const item4 = {
    title: "使用积分抵现",
    text: ""
}

const price = computed<number>(() => {
    return parseInt(item1.text as any) * 100
})

onMounted(() => {
    api.getGoodsDetails({ id: route.params.id }).then(res => {
        if (res.data.status == 200) {
            goodsDetails.value = res.data.data
            item1.text = goodsDetails.value?.price
        }
    })
})

const onSubmit = () => {
    api.getPayOrder({ orderNo: route.params.orderNo }).then(res => {
        const div = document.createElement("formdiv")
        div.innerHTML = res.data.data
        document.body.appendChild(div)
        nextTick(() => {
            document.forms["0"].submit()
        })
    })
}


</script>
<style lang="less" scoped>
.goods {
    background: #fff;
    margin: 10px 0;
    border: 5px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    .image {
        margin-right: 10px;

        img {
            width: 100px;
            border-radius: 10px;
        }
    }

    .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        h3 {
            font-size: 15px;
        }

        div {
            display: flex;

            .price {
                flex: 1;
                display: block;
                color: #F23D52;
            }

            .num {
                flex: 1;
                font-size: 12px;
                text-align: right;
                padding-top: 3px;
            }
        }
    }
}
</style>
